import React from 'react'
// import ReactDOM from 'react-dom'
import * as actions from  './redux/actions'

export default class App extends React.Component{

    constructor(props){
        super(props);
        // 状态数据
        this.state={
            count:0
        }
    }

    render(){
        return <div>
            <h1>redux实现计数器</h1>
            <hr/>
            <h3>计数器:{this.props.store.getState()}</h3>
            <select name="step" ref={input => this.state.step = input}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            &nbsp;
            <button onClick={()=>this.increment()}>增加+</button>
            &nbsp;
            <button onClick={()=>this.decrement()}>减少-</button>
        </div>
    }

    componentDidMount(){
        // console.log(this.state.step.value);    
    }

    increment(){
        const step=parseInt(this.state.step.value);
        // this.setState({count:this.state.count+step});
        // this.props.store.dispatch({type:'increment',data:step});
        this.props.store.dispatch(actions.increment(step));

        console.log(step)
    }

    decrement(){
        const step=parseInt(this.state.step.value);
        // this.setState({count:this.state.count-step})
        // this.props.store.dispatch({type:'decrement',data:step});
        this.props.store.dispatch(actions.decrement(step));

        console.log(step)

    }


}